

import React, { useCallback } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { FontAwesome6 } from '@expo/vector-icons';
import { LinearGradient } from 'expo-linear-gradient';
import styles from './styles';

interface ApprovalData {
  id: string;
  title: string;
  initiator: string;
  priority: 'high' | 'medium' | 'normal';
  createTime: string;
  currentNode: string;
  timeAgo: string;
}

interface ApprovalItemProps {
  approval: ApprovalData;
  isSelected: boolean;
  isBatchMode: boolean;
  onPress: () => void;
  onSelect: (isSelected: boolean) => void;
}

const ApprovalItem: React.FC<ApprovalItemProps> = ({
  approval,
  isSelected,
  isBatchMode,
  onPress,
  onSelect,
}) => {
  const getPriorityStyle = useCallback((priority: string) => {
    switch (priority) {
      case 'high':
        return styles.priorityHigh;
      case 'medium':
        return styles.priorityMedium;
      default:
        return styles.priorityNormal;
    }
  }, []);

  const getPriorityText = useCallback((priority: string) => {
    switch (priority) {
      case 'high':
        return '高优先级';
      case 'medium':
        return '中优先级';
      default:
        return '普通';
    }
  }, []);

  const handleCheckboxPress = useCallback(() => {
    onSelect(!isSelected);
  }, [isSelected, onSelect]);

  const handleItemPress = useCallback(() => {
    if (isBatchMode) {
      onSelect(!isSelected);
    } else {
      onPress();
    }
  }, [isBatchMode, isSelected, onPress, onSelect]);

  return (
    <TouchableOpacity
      style={styles.container}
      onPress={handleItemPress}
      activeOpacity={0.7}
    >
      <LinearGradient
        colors={['rgba(99, 102, 241, 0.1)', 'rgba(139, 92, 246, 0.1)']}
        start={{ x: 0, y: 0 }}
        end={{ x: 1, y: 1 }}
        style={styles.cardGradient}
      >
        <View style={styles.content}>
          {/* 复选框 */}
          <TouchableOpacity
            style={styles.checkboxContainer}
            onPress={handleCheckboxPress}
          >
            <View style={[
              styles.checkbox,
              isSelected && styles.checkboxSelected
            ]}>
              {isSelected && (
                <FontAwesome6 name="check" style={styles.checkboxIcon} />
              )}
            </View>
          </TouchableOpacity>

          {/* 主要内容 */}
          <View style={styles.mainContent}>
            {/* 标题和优先级 */}
            <View style={styles.titleRow}>
              <Text style={styles.title} numberOfLines={2}>
                {approval.title}
              </Text>
              <View style={[styles.priorityBadge, getPriorityStyle(approval.priority)]}>
                <Text style={styles.priorityText}>
                  {getPriorityText(approval.priority)}
                </Text>
              </View>
            </View>

            {/* 详细信息 */}
            <View style={styles.detailsContainer}>
              <View style={styles.detailRow}>
                <FontAwesome6 name="user" style={styles.detailIcon} />
                <Text style={styles.detailText}>发起人：{approval.initiator}</Text>
              </View>
              <View style={styles.detailRow}>
                <FontAwesome6 name="clock" style={styles.detailIcon} />
                <Text style={styles.detailText}>发起时间：{approval.createTime}</Text>
              </View>
              <View style={styles.detailRow}>
                <FontAwesome6 name="layer-group" style={styles.detailIcon} />
                <Text style={styles.detailText}>当前节点：{approval.currentNode}</Text>
              </View>
            </View>
          </View>

          {/* 右侧信息 */}
          <View style={styles.rightContent}>
            <Text style={styles.timeAgo}>{approval.timeAgo}</Text>
            {!isBatchMode && (
              <FontAwesome6 name="chevron-right" style={styles.chevronIcon} />
            )}
          </View>
        </View>
      </LinearGradient>
    </TouchableOpacity>
  );
};

export default ApprovalItem;

